<template>
    <div class="box">
        <div class="title pa-20">
            <p><i><img src="@/assets/images/icon-status.png"></i>{{status}}</p>
            <span>时间：{{date}}</span>
        </div>
        <div class="code-box" :class="{'active': status == '待付款'}">
           <div class="pa-l-r-20">
               <p>取票码 <b>{{ticketCode}}</b></p>
               <img src="../../../assets/images/order-refunded.png" v-if="status == '已退款'">
               <img src="../../../assets/images/order-expired.png" v-if="status == '已过期'">
               <img src="../../../assets/images/order-completed.png" v-if="status == '已完成'">
           </div>
            <i>
                <img :src="codeImg">
            </i>
        </div>
        <div class="gray-box"></div>
        <div class="address">
            <i><img src="@/assets/images/icon-user-address.png"></i>
            <div>
                <p><b>{{userName}}</b>  {{phone}} </p>
                <span class="only-1">{{address}}</span>
            </div>
        </div>
        <div class="gray-box"></div>
        <div class="goods-box pa-l-r-20">
            <h4>商品清单</h4>
            <div class="details-box">
                <i><img :src="goodsDetails.img"></i>
                <div>
                    <div class="multi-line">
                        {{goodsDetails.name}}
                    </div>
                    <div class="price">
                        <p>×{{goodsDetails.amount}}</p>
                        <span>¥<b>{{goodsDetails.amount * goodsDetails.price}}</b></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="gray-box"></div>
        <div class="pa-l-r-20 cost-box">
            <h4>费用明细</h4>
            <div class="list-box">
                <label>商品金额</label>
                <span>¥{{goodsDetails.price}}</span>
            </div>
            <div class="list-box">
                <label>运费</label>
                <span>{{(goodsDetails.freight==0)?'无':('¥'+goodsDetails.freight)}}</span>
            </div>
            <div class="total">总金额冒：¥<span>{{goodsDetails.price *goodsDetails.amount +goodsDetails.freight}}</span></div>
        </div>
        <div class="gray-box"></div>
        <div class="pa-l-r-20 cost-box">
            <h4>订单信息</h4>
            <div class="list-box">
                <label>订单编号</label>
                <span>¥{{order.number}}</span>
            </div>
            <div class="list-box">
                <label>交易时间</label>
                <span>{{(order.time)}}</span>
            </div>
            <div class="total">总金额：¥<span>{{goodsDetails.price *goodsDetails.amount +goodsDetails.freight}}</span></div>
        </div>

    </div>
</template>

<script>
    import img from '../../../assets/temporary/index200.png'//
    import codeImg from '../../../assets/temporary/code.png'
    export default {
        name: "details",
        data(){
            return{
                status:'已完成',//状态
                date:'2019-12-20  12:25:23',//
                phone:'15178941234',//
                userName:'王小明',
                address:'郑州市中原区国家大学科技园西区1楼12楼1008室',
                goodsDetails:{img,name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:56,amount:1,freight:0},//商品信息
                order:{number:'2019121828691231',time:'2019-12-18  12:15:36'},//订单信息
                ticketCode:252150,//取票码
                codeImg,
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@/assets/css/public";
    .box{
        padding-bottom: vw(120);
        background-color: $gray_bg;
        h4{
            height: vw(80);
            line-height: vw(80);
            font-weight: normal;
            font-size: vw(32);
            border-bottom: 1px solid $gray_bg;
        }
        .title{
            font-size: vw(24);
            color: #fff;
            background-color: $green;
            p{
                display: flex;
                align-items: center;
                margin-bottom: vw(20);
                font-size: vw(30);
                i{
                    width: vw(38);
                    margin-right: vw(30);
                }
            }
        }
        .address {
            display: flex;
            align-items: center;
            padding: vw(30) vw(20);
            font-size: vw(24);
            color: #999;
            background-color: #fff;
            i{
                width: vw(72);
                margin-right: vw(20);
            }
            div{
                display: flex;
                flex-direction: column ;
                flex: 1;
                overflow: hidden;
                p{
                    margin-bottom: vw(10);
                    font-size: vw(28);
                    b{
                        margin-right: vw(10);
                        font-size: vw(32);
                        color: #333;
                    }
                }
            }
        }
        .express {
            display: flex;
            align-items: center;
            height: vw(100);
            background-color: #fff;
        }
        .goods-box {

            background-color: #fff;
            .details-box {
                display: flex;
                padding: vw(20) 0 vw(38);
                i{
                    width: vw(200);
                }
                >div{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding:0 vw(10) 0 vw(20);
                    .multi-line {
                        line-height: vw(42);
                        -webkit-line-clamp: 2;
                    }
                    .price {
                        text-align: right;
                        b{
                            font-weight: normal;
                            font-size: vw(36);
                        }
                    }
                }
            }
        }
        .cost-box {
            background-color: #fff;
        }
        .list-box {
            display: flex;
            justify-content: space-between;
            padding: vw(16) 0;
            label{
                color: #999;
            }
        }
        .total{
            height: vw(100);
            line-height: vw(100);
            text-align: right;
            border-top: 1px solid $gray_bg;
            span{
                font-size: vw(36);
            }
        }
        .code-box {

            background-color: #fff;
            &.active{
                b{
                    color: #333;
                }
            }
            >div{
                display: flex;
                align-items: center;
                height: vw(140);
                padding-left: vw(90);
                font-size: vw(42);
                color: #999;
                font-weight: bold;
                border-bottom: 1px solid $gray_bg;

                b{
                    margin-left: vw(64);
                    color: #999;
                }
                img{
                    width: vw(100);
                    transform: translateX(vw(-50));
                }
            }
            i{
                display: block;
                padding: vw(80) 0;
                img{
                    width: vw(240);
                    margin: 0 auto;
                }
            }
        }
    }
</style>